<template>
  <div>
    <el-tabs
      v-model="activeTopTemp"
      type="card"
      @tab-remove="removeTab"
      @tab-click="handleClick"
      element-loading-text = "拼命加载中"
    >
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="index"
        :label="item.title"
        :name="item.name"
        :closable="item.closable"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: {
    editableTabs: {
      type: Array,
      default: null,
    },
    editableTabsValue: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      activeTopTemp:this.editableTabsValue
    };
  },
  watch: {
    editableTabsValue(val) {
       this.activeTopTemp = val
    },
  },
  methods: {
    handleClick(tab) {
      this.$emit("tabHandleClick",tab);
    },

    removeTab(tab) {
      this.$emit("removeTab",tab);
    },
  },
};
</script>
<style lang="less">
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 0 !important;
}
.el-tabs--border-card {
  height: calc(100vh - 5px);
}
</style>